
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<!-- 引入通用头部 -->
<div id="commonHeader"></div>

<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
    <div class="container">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="grid-demo">
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
                    <div class="mulu">全部商品分类</div>
                    <!-- 列表 -->
                    <div class="grid-demo">
                        <div class="layui-panel">
                            <ul class="layui-menu" id="demo-menu">
                                
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs9 layui-col-sm9 layui-col-md9">
                    <!-- 轮播图 -->
                    <div class="grid-demo swiper">
                        <div class="layui-carousel swiper" id="ID-carousel-demo-image">
                            <div carousel-item id="carousel-container">
                                <!-- 轮播图内容将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

            <div class="grid-demo"><!--热销的标题-->
                <div class="likeTitle title">抢购图书
                    <span id="time" class="time"></span>
                </div>
                <div class="booksList">
                    <div class="booksItem" onclick="detail('1')">
                        <img src="./img/tupian22.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购10%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian23.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="15%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购15%</div>
                        <!-- <div class="booksPrice">￥15.00</div> -->
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian24.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购50%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian25.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="45%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购45%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian26.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="25%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购25%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian27.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购10%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian28.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购20%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian29.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="80%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购80%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian30.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="60%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购60%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian31.jpg" alt="">
                        <div class="empty5"></div>
                        <div class="layui-progress progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="70%"></div>
                        </div>
                        <div class="empty5"></div>
                        <div class="booksInfo font14 colorRed">已抢购70%</div>
                        <div class="sale">
                            <div class="booksPrice">￥15.00</div>
                            <div class="SalePrice"><del>￥17.00</del></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

            <div class="grid-demo"><!--热销的标题-->
                <div class="hotTitle title">热销图书</div>
                <div class="booksList">
                    <div class="booksItem">
                        <img src="./img/tupian21.jpg" alt="">
                        <div class="booksInfo">故事的主角大熊先生原本住在山洞里，他对新生活充满向往。</div>
                        <div class="booksPrice">￥10.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian12.jpg" alt="">
                        <div class="booksInfo">一只天鹅蛋在鸭巢中被孵出，这只小天鹅因相貌 “丑陋”，被戏称为 “丑小鸭”</div>
                        <div class="booksPrice">￥10.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian13.jpg" alt="">
                        <div class="booksInfo">一阵风将男孩的帽子吹跑，男孩开始了寻找帽子的旅程。</div>
                        <div class="booksPrice">￥15.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian14.jpg" alt="">
                        <div class="booksInfo">她的肚子里有个火车站，里面住着负责把食物弄成泥的小精灵。</div>
                        <div class="booksPrice">￥15.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian15.jpg" alt="">
                        <div class="booksInfo">小象送给蚂蚁一顶帽子，一阵大风吹来，小蚂蚁的帽子被吹走了。</div>
                        <div class="booksPrice">￥15.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian16.jpg" alt="">
                        <div class="booksInfo">小女孩毛毛的爸爸常年在外盖房子，只有过年才回家。</div>
                        <div class="booksPrice">￥12.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian17.jpg" alt="">
                        <div class="booksInfo">生活在城里的小男孩阳阳跟随爸爸妈妈回到水乡给奶奶祝寿。</div>
                        <div class="booksPrice">￥12.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian18.jpg" alt="">
                        <div class="booksInfo">来自B-612星球的小王子照顾玫瑰花，却被她伤害，于是选择离开自己的星球。</div>
                        <div class="booksPrice">￥18.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian19.jpg" alt="">
                        <div class="booksInfo">暴雨将至，蚁群团结协作共寻新家。</div>
                        <div class="booksPrice">￥18.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian20.jpg" alt="">
                        <div class="booksInfo">小兔子原本挑食，导致没力气，从此再也不挑食了。</div>
                        <div class="booksPrice">￥20.00</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

            <div class="grid-demo"><!--热销的标题-->
                <div class="likeTitle title">推荐图书</div>
                <div class="booksList">
                    <div class="booksItem">
                        <img src="./img/tupian2.jpg" alt="">
                        <div class="booksInfo">河马妈妈做了香喷喷的松饼想分给森林里的小动物们。</div>
                        <div class="booksPrice">￥20.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian3.jpg" alt="">
                        <div class="booksInfo">鳄鱼迷上烹饪游戏，兔子沉迷种菜游戏，大象爱上旅行游戏。</div>
                        <div class="booksPrice">￥15.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian4.jpg" alt="">
                        <div class="booksInfo">以孩子的视角展开，从日常生活出发，描述了妈妈的各种形象。</div>
                        <div class="booksPrice">￥18.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian5.jpg" alt="">
                        <div class="booksInfo">以孩子的视角和口吻展开，用简单朴实的语言，塑造了一个爸爸形象。</div>
                        <div class="booksPrice">￥18.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian6.jpg" alt="">
                        <div class="booksInfo">以小精灵普普的视角展开，讲述了一场与水果有关的探险之旅。</div>
                        <div class="booksPrice">￥16.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian7.jpg" alt="">
                        <div class="booksInfo">故事围绕着两只性格迥异的兔子洛根和露娜展开。</div>
                        <div class="booksPrice">￥18.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian8.jpg" alt="">
                        <div class="booksInfo">为儿童打造的绘本集，旨在陪伴孩子度过温馨的睡前时光。</div>
                        <div class="booksPrice">￥20.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian9.jpg" alt="">
                        <div class="booksInfo">故事围绕着一只充满好奇心的兔子展开。</div>
                        <div class="booksPrice">￥20.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian10.jpg" alt="">
                        <div class="booksInfo">一只百无聊赖的小猪，它觉得做小猪实在乏味，一心渴望体验别样的生活。</div>
                        <div class="booksPrice">￥20.00</div>
                    </div>
                    <div class="booksItem">
                        <img src="./img/tupian11.jpg" alt="">
                        <div class="booksInfo">过冬的存粮吃光了，小浣熊瓦斯里和好友灰獾决定去河边钓鱼充饥。</div>
                        <div class="booksPrice">￥20.00</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 footer">


    <div class="footerBG"><img src="./img/页尾1.png"></div>
    <div class="footerList">
        <div class="ListItem">
            <ul>
                <li>购物指南</li>
                <li>购物流程</li>
                <li>服务协议</li>
                <li>会员优惠</li>
            </ul>
        </div>
        <div class="ListItem">
            <ul>
                <li>支付方式</li>
                <li>网上支付</li>
                <li>银行转账</li>
                <li>礼品卡支付</li>
            </ul>
        </div>
        <div class="ListItem">
            <ul>
                <li>订单服务</li>
                <li>配送服务查询</li>
                <li>订单状态说明</li>
                <li>自动取消订单</li>
            </ul>
        </div>
        <div class="ListItem">
            <ul>
                <li>配送方式</li>
                <li>当日递</li>
                <li>次日达</li>
                <li>验货与签收</li>
            </ul>
        </div>
        <div class="ListItem">
            <ul>
                <li>退换货</li>
                <li>退换货服务查询</li>
                <li>自助申请退换货</li>
                <li>退换货进度查询</li>
            </ul>
        </div>
        <div class="ListItem">
            <ul>
                <li>商家服务</li>
                <li>商家中心</li>
                <li>运营服务</li>
            </ul>
        </div>
    </div>
    <div class="">
        <div class="footerInfo">
            <div class="InfoItem">关于我们</div>
            <div class="InfoItem">联系我们</div>
            <div class="InfoItem">机构销售</div>
            <div class="InfoItem">热词搜索</div>
            <div class="InfoItem">公司简介</div>
            <div class="InfoItem">二手招商</div>
            <div class="InfoItem">质量公告</div>
        </div>
        <div class="footerCopyright">Copyright 2025-2028二手幼儿绘本交易系统 </div>
        <div class="footerDes">
            <div class="DesItem">
                <div class="Des">客服热线：88888888</div>
                <div class="Des">工作时间：9:00 - 18:00</div>
                <div class="Des">电子邮箱：8888888888@qq.com</div>
            </div>
            <div class="DesItem">
                <div class="Des">互联网出版许可证</div>
                <div class="Des">出版物经营许可证</div>
                <div class="Des">违法举报电话：66666666</div>
                <div class="Des">营业执照</div>
            </div>
            <div class="DesItem"></div>
            <div class="Des">公司地址：陕西省西安市梨园路</div>
        </div>
        <div class="DesItem"></div>
        <div class="Des">本二手幼儿绘本交易系统致力于为您打造便捷可靠的交易通道。在此要强调，所有二手绘本无论如何流转，原始版权归原作者及出版社，未经授权不得复制、传播。
        </div>
    </div>
</div>
</div>
</div>
</div>
<div id="mask">
    <div class="maskContent loginBox">
        <div class="loginTitleBox">
            <div class="loginTitle">登录</div>
            <div class="loginClose" id="closeMask">
                <i class="layui-icon layui-icon-close"></i>
            </div>
        </div>
        <div class="loginContent">
            <div class="loginInput">
                <input type="text" placeholder="请输入用户名">
            </div>
            <div class="loginInput">
                <input type="password" placeholder="请输入密码">
            </div>
            <div class="loginBtn">
                <button class="loginBtn">登录</button>
            </div>
            <div class="loginBtn">
                <div id="loginBtn">没有账号?</div>
                <button class="loginBtn">去注册</button>
            </div>
        </div>
    </div>
</div>

<!-- 在底部引入脚本 -->
<script src="./layui/layui.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/api.js"></script>
<script src="./js/auth.js"></script>
<script src="./js/header.js"></script>
<script src="./js/home.js"></script>
</body>

</html>